<template>
<div class="tsy-example-form-create-main">
  <div class="h2">新建表单用例</div>
  <sy-form :inputs="formInputs" url="/example/syform/submit-url" @submitted="createSubmitted" @canceled="createCanceled"></sy-form>
</div>
</template>

<script>
export default {
  created() {
    this.formInputs = [
      {
        type: "input",
        name: "xingming",
        value: "tsy",
        label: "姓名",
        meta: {
          placeholder: "请输入姓名",
          width: 300,
          maxlength: 30,
        },

        rule: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      {
        type: "options",
        name: "gender",
        value: "male",
        label: "性别",
        meta: {
          url: "/example/gender/options",
          type: 2,
          mock() {
            return [
              { label: "男", value: "male" },
              { label: "女", value: "female" },
            ];
          },
        },
      },
      {
        type: "options",
        name: "xueli",
        value: "bachelor",
        label: "学历",
        meta: {
          options: [
            {
              label: "中学",
              value: "highschool",
            },
            {
              label: "大专",
              value: "college",
            },
            {
              label: "大学（本科）",
              value: "bachelor",
            },
            {
              label: "研究生",
              value: "master",
            },
          ],
        },
      },
      {
        type: "options",
        kind: 2,
        name: "xingqu",
        label: "兴趣",
        meta: {
          url: "/example/xingqu/options",
          type: 2,
          multiple: true,
          mock() {
            return [
              {
                label: "篮球",
                value: "lanqiu",
              },
              {
                label: "足球",
                value: "zuqiu",
              },
              {
                label: "乒乓",
                value: "pingpang",
              },
            ];
          },
        },
      },
      {
        type: "options",
        name: "gangwei",
        label: "岗位",
        meta: {
          url: "/example/gangwei/options",
          multiple: true,
          mock() {
            return [
              {
                label: "前端工程师",
                value: "FE",
              },
              {
                label: "后端工程师",
                value: "BE",
              },
              {
                label: "技术经理",
                value: "MGR",
              },
            ];
          },
        },
      },
      {
        type: "datepicker",
        name: "birthday",
        label: "生日",
        value: "1983-7-4",
      },
    ];
  },
  methods: {
    createSubmitted(data) {
      console.log(data)
      this.$message.success('新建表单提交完成')
    },
    createCanceled() {
      this.$message.error('新建表单取消了')
      setTimeout(() => {
        this.goto("sy-form")
      }, 1500)
    },
  }
};
</script>